import React, { memo, useState } from 'react'
import { shallowEqual, useSelector } from 'react-redux'

import HYSongsCategory from '../songs-category'
import { HeaderWrapper, HeaderLeft, HeaderRight } from './style'

export default memo(function HYSongsHeader () {

  const [showCategory, setShowCategory] = useState(false);

  const { currentCategory } = useSelector(state => ({
    currentCategory: state.getIn(['songs', 'currentCategory'])
  }), shallowEqual);

  const onClose = () => {
    setShowCategory(false);
  }
  
  return (
    <HeaderWrapper>
      <HeaderLeft>
        <span className="title">{currentCategory}</span>
        <button className="select" onClick={e => setShowCategory(!showCategory)}>
          <span>选择分类</span>
          <i className="sprite_icon2"></i>
        </button>
        {showCategory ? <HYSongsCategory onClose={onClose} /> : null}
      </HeaderLeft>
      <HeaderRight>
        <button className="hot">热门</button>
      </HeaderRight>
    </HeaderWrapper>
  )
})
